<form id="order-form" class="smart-form" novalidate="novalidate" [saUiValidate]="validationOptions">
  <header>
    Order services
  </header>

  <fieldset>
    <div class="row">
      <section class="col col-6">
        <label class="input"> <i class="icon-append fa fa-user"></i>
          <input type="text" name="name" placeholder="Name"/>
        </label>
      </section>
      <section class="col col-6">
        <label class="input"> <i class="icon-append fa fa-briefcase"></i>
          <input type="text" name="company" placeholder="Company"/>
        </label>
      </section>
    </div>

    <div class="row">
      <section class="col col-6">
        <label class="input"> <i class="icon-append fa fa-envelope-o"></i>
          <input type="email" name="email" placeholder="E-mail"/>
        </label>
      </section>
      <section class="col col-6">
        <label class="input"> <i class="icon-append fa fa-phone"></i>
          <input type="tel" name="phone" placeholder="Phone" saMaskedInput="(999) 999-9999" >
        </label>
      </section>
    </div>
  </fieldset>

  <fieldset>
    <div class="row">
      <section class="col col-6">
        <label class="select">
          <select name="interested">
            <option value="0" disabled>Interested in</option>
            <option value="1">design</option>
            <option value="1">development</option>
            <option value="2">illustration</option>
            <option value="2">branding</option>
            <option value="3">video</option>
          </select> <i></i> </label>
      </section>
      <section class="col col-6">
        <label class="select">
          <select name="budget">
            <option value="0" disabled>Budget</option>
            <option value="1">less than 5000$</option>
            <option value="2">5000$ - 10000$</option>
            <option value="3">10000$ - 20000$</option>
            <option value="4">more than 20000$</option>
          </select> <i></i> </label>
      </section>
    </div>

    <div class="row">
      <section class="col col-6">
        <label class="input"> <i class="icon-append fa fa-calendar"></i>
          <input type="text" name="startdate" id="startdate" [saUiDatepicker]="{minRestrict:'#finishdate'}" placeholder="Expected start date"/>
        </label>
      </section>
      <section class="col col-6">
        <label class="input"> <i class="icon-append fa fa-calendar"></i>
          <input type="text" name="finishdate" id="finishdate" [saUiDatepicker]="{maxRestrict:'#startdate'}" placeholder="Expected finish date"/>
        </label>
      </section>
    </div>

    <section>
      <sa-file-input></sa-file-input>
    </section>

    <section>
      <label class="textarea"> <i class="icon-append fa fa-comment"></i>
        <textarea rows="5" name="comment" placeholder="Tell us about your project"></textarea>
      </label>
    </section>
  </fieldset>
  <footer>
    <button type="submit" class="btn btn-primary">
      Validate Form
    </button>
  </footer>
</form>
